<template>
    <div class="snapShots">
        <appFrame leftIcon="icongw-icon-fanghui" leftIconSize="18" :touchBack="true" :showBottom="false">
            <div slot="header-center" style="font-size: 18px;display: flex;align-items: center;">
                <img :src="title[snapShotType].img" alt="" style="margin-right: 10px;width: 18px;">{{ title[snapShotType].message }}
            </div>
            <div class="container" v-loading="loading">
                <ul class="infinite-list wh100">
                    <div v-if="noData" class="noDataTips">
                        <!-- <span>无{{ title[snapShotType].message }}</span> -->
                    </div>
                    <li v-for="item in lazyData" class="infinite-list-item" :key="item.guid" @click="showDetail(item)">
                        <header>
                            <span>{{ item.equipName || item.eventMsg}}</span>
                            <span>{{ item.time.split(' ')[1] }}</span>
                        </header>
                        <div class="content">
                            <span>{{ item.eventMsg }}</span>
                        </div>
                    </li>
                </ul>
            </div>
        </appFrame>
        <el-drawer class="details" title="" :visible.sync="drawer" size="80%" direction="btt" :show-close="false">
            <div class="header">
                <p>快照类型-{{ form.popType }}</p>
                <!-- <el-button type="text" @click="onAffirmDraw" :icon="loadingIcon">
                    <span v-show="textShow">确认</span>
                </el-button> -->
            </div>
            <div class="drawer-content content">
                <el-form :model="form" :gutter="16">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="生成时间">
                                <el-input prefix-icon="el-icon-time" v-model="form.popTime" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="事件详情">
                                <el-input v-model="form.popIncident" type="textarea" rows="3" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col v-if="wuBaoShow" :span="24">
                            <el-form-item label="是否误报" class="inlineFormItem">
                                <el-switch v-model="radio1" active-value="1" inactive-value="0"></el-switch>
                                <!-- <div class="radios">
                                    <el-radio v-model="radio1" label="1" border size="mini">
                                        是
                                    </el-radio>
                                    <el-radio v-model="radio1" label="0" border size="mini">
                                        否
                                    </el-radio>
                                </div> -->
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="处理意见" class="noDisabled">
                                <el-input class="textarea" type="textarea" placeholder="请输入内容" rows="3" v-model="form.popConfirmremark" maxlength="255" show-word-limit :disabled="form.userConfirm?'disabled':false"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <footer class="footer" v-if="!form.userConfirm">
                <el-button type="primary" @click="onAffirmDraw" :icon="loadingIcon" >
                    <span v-show="textShow">确认</span>
                </el-button>
            </footer>
        </el-drawer>
    </div>
</template>

<script>
export default {
    data () {
        return {
            wuBaoShow: false,
            snapShotType: this.$route.params.type,

            // status: ['全部', '待确认', '确认'],
            status: ['全部'],
            snapShotsNum: [123, 456, 789],
            selectStatus: '',
            lazyData: [],
            loading: false,
            noMore: false,
            PageNo: 1,
            PageSize: 1000,
            first: true,
            eventType: {
                Infos: '0, 1',
                Warnings: '2,3,4,5,6,7,8,9',
                Settings: '10001',
                Assets: '10002',
                Errors: '10003,10004,10005'
            },
            drawer: false,
            form: {},
            attrCurrentList: [],
            IntervalTimer: null,
            noData: true,
            loadingIcon: '',
            textShow: true,
            title: {
                Errors: {
                    message: '故障快照',
                    img: 'static/Images/snapshot_alarm.svg'
                },
                Warnings: {
                    message: '警告快照',
                    img: 'static/Images/snapshot_warning.svg'
                },
                Infos: {
                    message: '信息快照',
                    img: 'static/Images/snapshot_info.svg'
                },
                Settings: {
                    message: '设置快照',
                    img: 'static/Images/snapshot_setup.svg'
                },
                Assets: {
                    message: '资产快照',
                    img: 'static/Images/snapshot_zichan.svg'
                }
            },
            radio1: ''
        }
    },
    mounted () {
        this.getRealTimeEvent({
            eventName: '',
            eventType: this.eventType[this.snapShotType],
            pageNo: this.PageNo,
            pageSize: this.PageSize
        })
        this.IntervalTimer = setInterval(() => {
            this.getRealTimeEvent({
                eventName: '',
                eventType: this.eventType[this.snapShotType],
                pageNo: this.PageNo,
                pageSize: this.PageSize
            })
        }, 2000)

        if (this.$route.params.type == 'Warnings') {
            this.wuBaoShow = true
        }
    },
    destroyed () {
        clearInterval(this.IntervalTimer)
        this.IntervalTimer = null
    },
    computed: {

        // statusInfo() {
        //     return this.status.map((item, index) => {return (item +' ' + this.snapShotsNum[index])});
        // },
        type () {
            return this.$route.params.type
        }

        // disabled () {
        //     return this.loading || this.noMore
        // },
        // state() {
        //     return this.selectStatus.split(' ')[0];
        // }
    },
    methods: {
        onSwipeRight () {
            this.$router.back(-1)
        },
        getRealTimeEvent (data) {
            this.$api
                .getRealTimeEvent(data)
                .then((res) => {
                    if (res.data.succeeded) {
                        let allSnapshoot = res.data.data.list
                        if (allSnapshoot.length > 0) {
                            allSnapshoot.forEach((item, i) => {
                                item.guid = item.guid
                                item.time = item.time.replace(/T/, ' ')
                                item.typeIcon = this.judgeSnapshotType(item.level).typeIcon
                                item.typeSz = this.judgeSnapshotType(item.level).typeSz
                                if (item.relatedVideo) {
                                    item.relatedVideoState = true
                                } else {
                                    item.relatedVideoState = false
                                }
                                item.spanTextColor = this.judgeSnapshotType(
                                    item.level
                                ).spanTextColor
                            })
                            this.noData = false
                        } else {
                            this.noMore = true
                            this.noData = true
                        }

                        // if(this.first) {
                        //     this.snapShotsNum = [];
                        //     this.snapShotsNum.push(res.data.data.totalCount, res.data.data.notbConfirmed, res.data.data.isbConfirmed)
                        //     this.selectStatus = this.statusInfo[0];
                        //     this.first = false;
                        // }
                        this.lazyData = allSnapshoot
                    } else {
                        console.log(res.data.message)
                    }
                })
                .catch((err) => {
                    console.log(err)
                })
        },

        // load () {
        //     if(!this.noMore) {
        //         this.getRealTimeEvent({
        //             eventName: "",
        //             eventType: this.eventType[this.snapShotType],
        //             pageNo: this.PageNo,
        //             pageSize: this.PageSize
        //         });
        //     } else {
        //         console.log('没有更多数据了！');
        //     }
        // },
        // 判断快照类型
        judgeSnapshotType (no) {
            let type = {
                typeIcon: '',
                spanTextColor: '',
                typeSz: ''
            }
            if (no >= 10003 && no <= 10005) {
                type = {
                    typeIcon: 'static/Images/snapshot_alarm.svg',
                    spanTextColor: 'spanTextColor_gz',
                    typeSz: '故障'
                }
            } else if (no === 0 || no === 1) {
                type = {
                    typeIcon: 'static/Images/snapshot_info.svg',
                    spanTextColor: 'spanTextColor_xx',
                    typeSz: '信息'
                }
            } else if (no === 10001) {
                type = {
                    typeIcon: 'static/Images/snapshot_setup.svg',
                    spanTextColor: 'spanTextColor_sz',
                    typeSz: '设置'
                }
            } else if (no === 10002) {
                type = {
                    typeIcon: 'static/Images/snapshot_zichan.svg',
                    spanTextColor: 'spanTextColor_zc',
                    typeSz: '资产'
                }
            } else if (no > 1 && no < 10) {
                type = {
                    typeIcon: 'static/Images/snapshot_warning.svg',
                    spanTextColor: 'spanTextColor_jg',
                    typeSz: '警告'
                }
            }
            return type
        },
        statusChange () {
            this.lazyData = []
            if (this.state === this.status[0]) {
                this.getRealTimeEvent({
                    eventName: '',
                    eventType: this.eventType[this.snapShotType],
                    pageNo: this.PageNo,
                    pageSize: this.PageSize
                })
            }
            if (this.state === this.status[1]) {
                this.getRealTimeEvent({
                    eventName: '',
                    eventType: this.eventType[this.snapShotType],
                    pageNo: this.PageNo,
                    pageSize: this.PageSize,
                    confirmed: false
                })
            }
            if (this.state === this.status[2]) {
                this.getRealTimeEvent({
                    eventName: '',
                    eventType: this.eventType[this.snapShotType],
                    pageNo: this.PageNo,
                    pageSize: this.PageSize,
                    confirmed: true
                })
            }
        },
        showDetail (val) {
            console.log(val);
            this.drawer = true
            this.attrCurrentList = val

            this.form = {
                popType: val.typeSz,
                popTime: val.time,
                popIncident: val.eventMsg,
                popConfirmremark: val.procAdviceMsg ? val.procAdviceMsg : '',
                userConfirm: val.userConfirm
            }
        },
        onAffirmDraw () {
            if (this.wuBaoShow) {
                if (this.radio1 != 0 && this.radio1 != 1) {
                    this.$message({
                        message: this.$t('systemSnapshot.messageType[4]'),
                        type: 'warning'
                    });
                    return;
                }
            }
            this.loadingIcon = 'el-icon-loading'
            this.textShow = false

            let data = {
                GUID: this.attrCurrentList.guid,
                eventMsg: this.form.popIncident,
                time: this.form.popTime,
                procMsg: this.form.popConfirmremark,
                userName: sessionStorage.getItem('userName'),
                wuBao: this.radio1 - 0
            }

            this.$api
                .getConfirmedRealTimeEvent(data)
                .then((rt) => {
                    if (rt.data.code === 200) {
                        this.drawer = false
                        this.$message({
                            message: '确认成功',
                            type: 'success'
                        })
                    } else {
                        this.$message.error(rt.data.message)
                    }
                    this.loadingIcon = ''
                    this.textShow = true
                })
                .catch((err) => {
                    this.drawer = false
                    this.loadingIcon = ''
                    this.textShow = true
                    console.log('err---', err)
                })
        }
    }
}
</script>

<style lang="scss" scoped>
.snapShots {
    height: 100%;

    .main {
        padding-top: 0px;
        padding-left: 0px;
        padding-right: 0px;
        height: calc(100% - 64px);
    }

    .container {
        height: calc(100% - 60px);
        overflow: auto;

        .infinite-list {
            // padding-top: 16px;
            li {
                margin-bottom: 10px;
                position: relative;
                width: 100%;
                // line-height: 48px;
                border-radius: 6px;
                font-size: 14px;
                color: #d7dbe6;
                // border: 1px solid #464954;
                box-sizing: border-box;
                background-color: #232938;
                box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.06);
                padding: 15px 0px 23px 16px;

                .typeIco {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    height: 100%;
                    width: 80%;

                    img {
                        width: 30px;
                        height: 30px;
                    }

                    span {
                        padding-left: 10px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }

                header {
                    display: flex;
                    justify-content: space-between;
                    padding-right: 16px;

                    span:first-child {
                        font-size: 16px;
                        font-weight: bold;
                        color: #f2f2f2;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }

                    span:last-child {
                        font-size: 14px;
                        color: #646873;
                        margin-left: 15px;
                    }
                }

                .content {
                    color: #b9bcc3;
                    margin-top: 17px;
                    line-height: 17px;
                    padding-right: 16px;

                    span {
                        word-wrap: break-word;
                        word-break: normal;
                    }
                }
            }

            .noData {
                border: none;
                background-color: inherit;
                height: 100%;
                display: flex;
                justify-content: center;
                font-size: 20px;
            }
        }
    }

    /deep/ .details {
        @include fullScreenDrwer;
    }

    /deep/ .el-drawer {
        .header {
            color: #f0f4ff;
        }

        .drawer-content {
            padding: 0 16px;

            .el-form-item {
                margin-bottom: 21px;

                .el-form-item__label {
                    line-height: 19px;
                    float: none !important;
                }

                .el-form-item__content {
                    line-height: 19px;
                    margin-top: 11px;

                    .el-input__inner,
                    .el-textarea__inner {
                        background: rgb(12, 14, 20);
                        border: 1px solid #515561;
                        border-radius: 6px;
                    }
                }

                .el-input__inner[readonly],
                .el-textarea__inner[readonly] {
                    background: #2d3343;

                    &:focus {
                        border: 1px solid #515561 !important;
                        box-shadow: none;
                    }
                }

                .el-input__count {
                    // bottom: -8px;
                    background-color: transparent !important;
                }

                &.inlineFormItem {
                    display: flex;

                    .el-form-item__content {
                        margin-top: 0px;
                    }
                }
            }
        }
    }
}
</style>